<template>
  <q-form ref="form" @submit="onSubmit" class="q-gutter-md q-pb-xl">
    <formInput ref='formInput' :fieldlist="formFields" multipleCol />

    <history v-if="mode === 'edit'" class="q-mb-xl" :data="historyData" :escape="historyEscape" />

    <q-page-sticky position="bottom" :offset="[0, 28]">
      <q-btn label="保存" type="submit" color="primary" class="btn-fixed-width" icon="save" :loading="saving" v-if="canSave || mode === 'add'" />
      <q-btn label="返回" @click="onReset" color="primary" outline class="q-ml-md bg-white" />
    </q-page-sticky>
  </q-form>
</template>

<script>
import { defineComponent } from 'vue';
import formInput from 'src/components/FormInput.vue';
import { detailPageMix } from 'src/lib/mixin.js';
import history from 'src/components/history.vue'
import { useMeta } from 'quasar';
import { useStore } from 'stores/store';
import moment from 'moment';
import { isNumber } from 'src/lib/utils.js';

export default defineComponent({
  name: 'paymentDetail',
  setup (props, context) {
    const $store = useStore();
    const modelLabel = '缴费记录';
    const moduleName = 'payment';
    const detailApi = `/c2/manager/${moduleName}/detail`; // 明细数据接口
    const createApi = `/c2/manager/${moduleName}/create`; // 新建数据接口
    const updateApi = `/c2/manager/${moduleName}/update`; // 更新数据接口

    useMeta({
      // 设置文件标题
      title: `${modelLabel}详情 - ${$store.siteConfig.appName} - 木多鱼系列`
    });

    return {
      modelLabel,
      moduleName,
      detailApi,
      createApi,
      updateApi
    }
  },
  components: {
    formInput,
    history
  },
  mixins: [detailPageMix],
  data () {
    return {
      formFields: {
        tenant_id: { type: 'select', label: '组织名称 *', value: '', dict: 'tenant', rules: [val => !!val || '请输入组织名称'], readonly: false },
        payment_method: { type: 'select', label: '支付方式', value: '', dict: 'payMethod', readonly: false },
        payment_num: { type: 'input', label: '支付流水号', value: '', readonly: false },
        payment_content: { type: 'input', label: '支付内容', value: '', readonly: false },
        payment_money: { type: 'input', label: '支付金额', value: '', rules: [val => isNumber(val) || '请输入数值型数量'], readonly: false },
        start_time: { type: 'date', label: '有效期开始', value: '', readonly: false },
        expire_time: { type: 'date', label: '有效期结束', value: '', readonly: false }
      }
    };
  },
  async created () {
  },
  mounted () {
    if (this.mode === 'edit') {
      this.setReadonly();
      this.refreshData();
    }
  },
  methods: {
    onSubmit () {
      this.saving = true;
      this.saveData();
    }
  },
  computed: {
  },
  watch: {
    'formFields.tenant_id.value' (val) {
      if (this.mode === 'add') {
        this.$axios.post('/c2/manager/payment/getTenantStart', { tenant_id: val }).then(({ data }) => {
          this.formFields.start_time.value = data.start;
          this.formFields.expire_time.value = moment(data.start, 'X').add(1, 'month').unix();
        });
      }
    }
  }
});
</script>
